/**
 *  @互联家
 *  @互联家商户订单组件 
 */

import React, { Component } from 'react';
import { StyleSheet, ScrollView, View, Text, Image, TouchableHighlight } from 'react-native';

/**
 *  @style 主要样式导入
 */
import orderDetailStyle from "../styles/orderDetail";

/**
 *  @icon icon导入
 */
const phoneIcon = require('../assets/images/icon/phone.png');
const textimage = require('../assets/images/img/ash.png');

export default class OrderDetailScreen extends Component {

  static navigationOptions = {
    headerTitle: '订单详情',
    headerRight: <View />,
  };

  render() {
    return (
      <ScrollView>

        <View style={styles.containerBox}>
          <View style={styles.orderDetailItem}>
            <View style={styles.orderDetailItemRow}>
              <Text style={styles.orderDetailItemRowTitle}>预定人&#8195;</Text>
              <Text style={styles.orderDetailItemRowVal}>李大钊</Text>
            </View>
            <View style={styles.orderDetailItemRow}>
              <Text style={styles.orderDetailItemRowTitle}>联系方式</Text>
              <Text style={styles.orderDetailItemRowVal}>13771012793</Text>
            </View>
            <View style={styles.orderDetailItemRow}>
              <Text style={styles.orderDetailItemRowTitle}>入住人数</Text>
              <Text style={styles.orderDetailItemRowVal}>2</Text>
            </View>
            <View style={styles.orderDetailItemRow}>
              <Text style={styles.orderDetailItemRowTitle}>入住时间</Text>
              <Text style={styles.orderDetailItemRowVal}>2018-07-11</Text>
            </View>
            <View style={styles.orderDetailItemRow}>
              <Text style={styles.orderDetailItemRowTitle}>入住人01</Text>
              <Text style={styles.orderDetailItemRowVal}>方雯雯</Text>
            </View>
            <View style={styles.orderDetailItemRow}>
              <Text style={styles.orderDetailItemRowTitle}>入住人02</Text>
              <Text style={styles.orderDetailItemRowVal}>李倩倩</Text>
            </View>

            <View style={styles.phonePeople}>
              <TouchableHighlight style={styles.phonePeopleTouch}>
                <View style={styles.phonePeopleBox}>
                  <Image style={styles.phonePeopleTouchImage} source={phoneIcon} />
                  <Text style={styles.phonePeopleTouchName}>电话客户</Text>
                </View>
              </TouchableHighlight>
            </View>

          </View>

          <View style={styles.orderDetailItem}>
            <View style={styles.orderItemIdBox}>
              <Text style={styles.orderItemId}>订单编号：201811546872</Text>
              <Text style={styles.orderItemStatusActive}>待支付</Text>
            </View>
            <View style={styles.orderItemTheme}>
              <Image style={styles.orderItemThemeImage} source={textimage} />
              <View style={styles.orderItemThemeMain}>
                <View style={styles.orderItemThemeMainRowStart}>
                  <Text style={styles.orderItemThemeTitle} numberOfLines={2}>无锡新区桔子·精酒店豪华大水床 包早午饭有温泉泡</Text>
                </View>
                <View style={styles.orderItemThemeMainRowStart}>
                  <Text style={styles.orderItemThemeComment} numberOfLines={1}>6106好评</Text>
                </View>
                <View style={styles.orderItemThemeMainRowStart}>
                  <Text style={styles.orderItemThemeNowFee} numberOfLines={1}>¥288.00</Text>
                  <Text style={styles.orderItemThemeOldFee} numberOfLines={1}>¥288.00</Text>
                </View>
                <View style={styles.orderItemThemeMainRowEnd}>
                  <Text style={styles.orderItemThemeNum} numberOfLines={1}>X1</Text>
                </View>
              </View>
            </View>
            <View style={styles.orderItemRow}>
              <Text style={styles.orderItemRowTitle}>总价</Text>
              <Text style={styles.orderItemRowVal}>¥288.00</Text>
            </View>
            <View style={styles.orderItemRow}>
              <Text style={styles.orderItemRowTitle}>优惠</Text>
              <Text style={styles.orderItemRowVal}>-¥88.00</Text>
            </View>

            <View style={styles.orderTrueFee}>
              <Text style={styles.orderOneFee}>已优惠:¥88.00</Text>
              <Text style={styles.orderTwoFee}>实付款:</Text>
              <Text style={styles.orderThreeFee}>¥200.00</Text>
            </View>
          </View>

          <View style={styles.orderDetailItem}>
            <View style={styles.orderDetailItemRow}>
              <Text style={styles.orderDetailItemRowTitle}>订单编号</Text>
              <Text style={styles.orderDetailItemRowVal}>201811546872</Text>
            </View>
            <View style={styles.orderDetailItemRow}>
              <Text style={styles.orderDetailItemRowTitle}>下单时间</Text>
              <Text style={styles.orderDetailItemRowVal}>2018-07-01 16.55.54</Text>
            </View>
            <View style={styles.orderDetailItemRow}>
              <Text style={styles.orderDetailItemRowTitle}>支付方式</Text>
              <Text style={styles.orderDetailItemRowVal}>在线支付</Text>
            </View>
            <View style={styles.orderDetailItemRow}>
              <Text style={styles.orderDetailItemRowTitle}>支付时间</Text>
              <Text style={styles.orderDetailItemRowVal}>2018-07-01 16.56.54</Text>
            </View>
          </View>
        </View>

      </ScrollView>
    );
  };

};

const styles = StyleSheet.create(orderDetailStyle);